<template>
	<div class="css-text">
		<h2>文本类</h2>
		<div class="fo-Gray mt10">一些文本相关的css类封装</div>

		<h4 class="mt40">文本超出换行</h4>
		<codeBox :list='list1'></codeBox>

		<h4 class="mt40">文本对齐</h4>
		<codeBox :list='list2'></codeBox>

		<h4 class="mt40">文本下划线</h4>
		<codeBox :list='list3'></codeBox>

		<h4 class="mt40">文本首行缩进</h4>
		<codeBox :list='list4'></codeBox>
		
		<h4 class="mt40">字体加粗</h4>
		<codeBox :list='list5'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components: {
			codeBox
		},
		data() {
			return {
				list1: [{
						cssGroup: `
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					`,
						class: "over-one-line"
					},
					{
						cssGroup: `
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							display: -webkit-box;
							-webkit-line-clamp: 2;
						`,
						class: "over-two-line"
					},
					{
						cssGroup: `
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							display: -webkit-box;
							-webkit-line-clamp: 3;
						`,
						class: "over-three-line"
					}
				],
				list2: [{
						cssGroup: "text-align: left;",
						class: "txt-lef"
					},
					{
						cssGroup: "text-align: center;",
						class: "txt-cen"
					},
					{
						cssGroup: "text-align: right;",
						class: "txt-rig"
					},
					{
						cssGroup: "vertical-align: middle;",
						class: "txt-mid"
					},
				],
				list3: [{
						cssGroup: "text-decoration: underline;",
						class: "txt-underline"
					},
					{
						cssGroup: "text-decoration: line-through;",
						class: "txt-lineThrough"
					},
					{
						cssGroup: "text-decoration: overline;",
						class: "txt-overline"
					},
					{
						cssGroup: "text-decoration: blink;",
						class: "txt-blink"
					},
				],

				list4: [{
						cssGroup: "text-indent: 1em;",
						class: "txt-ind-1em"
					},
					{
						cssGroup: "text-indent: 2em;",
						class: "txt-ind-2em"
					},
					{
						cssGroup: "text-indent: 4em;",
						class: "txt-ind-4em"
					},
				],
				
				list5:[
					{cssGroup:"font-weight: 600;",class:"fo-we600"}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>
